<template>
  <el-dialog width="40%"
             :close-on-click-modal="false"
             :model-value="show"
             @close="show = false"
             :destroy-on-close="true"
             title="编辑">
    <el-scrollbar class="ba-table-form-scrollbar">
      <el-form :model="props.curRow"
               ref="formRef"
               @keyup.enter="onSubmit"
               label-width="130">
        <FormItem label="海外仓运费(美元)"
                  v-model="props.curRow.storage_fees"
                  prop="storage_fees"
                  type="string"
                  placeholder="请输入海外仓运费" />
        <FormItem label="头程运费(人民币)"
                  v-model="props.curRow.first_fees"
                  prop="first_fees"
                  type="string"
                  placeholder="请输入头程运费" />
        <el-form-item label="平台手续费预估"
                      prop="platformFee">
          <el-input v-model="props.curRow.platformFee"
                    placeholder="请输入平台手续费预估">
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每日退款预估"
                      prop="refund_fee">
          <el-input v-model="props.curRow.refund_fee"
                    placeholder="请输入每日退款预估">
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="广告费预估返点率"
                      prop="advertisement_rate">
          <el-input v-model="props.curRow.advertisement_rate"
                    placeholder="请输入广告费预估返点率">
            <template #append>%</template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <el-button @click="show = false">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { ref, inject } from 'vue'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import { updateFees } from '/@/api/backend/checkbill/monthFees'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
const baTable = inject('baTable') as baTableClass
const formRef = ref<FormInstance>()
const loading = ref(false)
const show = ref(false)

const props = defineProps({
    curRow:{
        required: true,
        type: Object,
        default: () => {return {}}
    }
})

defineExpose({
    show
})

const onSubmit = () => {
    loading.value = true
    const { id, storage_fees, first_fees, platformFee, refund_fee ,advertisement_rate } = props.curRow
    updateFees({id, storage_fees, first_fees, platformFee, refund_fee ,advertisement_rate}).then(res => {
        if(res.code == 200){
            show.value = false
            baTable.getIndex()
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
        } else {
            ElMessage ({
                type: 'error',
                message: res.msg,
            })
        }
        loading.value = false
    }).catch(() => {
        loading.value = false
    })
}
</script>

<style scoped lang='scss'>
:deep(.el-form-item){
    justify-content: center;
}
:deep(.el-form-item__content){
    width: 60%;
    flex: initial;
}
</style>